import './App.css';


import { Routes, Route, NavLink, Link } from "react-router-dom"

// 引入页面组件
import Pag1 from "./rrouterComponents/Page1"
import page1Son1 from "./rrouterComponents/Page1Son1"
import page1Son2 from "./rrouterComponents/Page1Son2"
import Pag2 from "./rrouterComponents/Page2"
// import Pag3 from "./rrouterComponents/Page3"

//异步路由
import { lazy, Suspense } from 'react';
//生成异步组件
let asyncPAge3 = lazy(() => {
  return import("./rrouterComponents/Page3")
})



function App() {
  return (
    <div className="App">
      <h1>下面是路由显示区域</h1>
      {/* NavLink和Link 的区别是点击之后NaviLink会自带一个active的类名 */}
      <NavLink to="/page1"> 跳转Page1 </NavLink>
      <NavLink to="/page1/son1?id=hello&age=12"> 跳转Page1--son1 </NavLink>
      <NavLink to="/page1/son2/12"> 跳转Page1--son2 </NavLink>
      <NavLink to="/page2"> 跳转Page2 </NavLink>
      <Link to="/page3"> 跳转Page3 </Link>
      {/* v5 Routes 是  switch    v5 只有components*/}
      <Suspense fallback={<h1> 加载中。。。。。。。。。</h1>}>
        <Routes>
          <Route path='/page1' Component={Pag1}>
            {/* 嵌套路由 */}
            <Route path='son1' Component={page1Son1}></Route>
            {/* 动态路由  */}
            <Route path='son2/:id' Component={page1Son2}></Route>
          </Route>
          <Route path='/page2' element={<Pag2></Pag2>}></Route>

          <Route path='/page3' Component={asyncPAge3}></Route>

        </Routes>
      </Suspense>
    </div>
  );
}

export default App;
